<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height: 100px;
            width: 100px;
            border: 1px solid #000;
            background-color: yellow;
            position: absolute;
        }

        .box1 {
            height: 100px;
            width: 100px;
            border: 1px solid #000;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<script>
    var oBox=document.querySelector("box");
    // 使用构造函数
    //  constructor

    // class Person{
    //     constructor(){
    //         this
    //     }
    // }

    class DragBox{
        constructor(){
            this.ele=null;
        }
       init(str){
            this.ele=document.querySelector(str);
            return this;
       }
       dragStart(){
            this.ele.onmousedown=(evt)=>{
                var e=evt||window.event;
                var disX=e.clientX-this.ele.offsetLeft;
                var disY=e.clientY-this.ele.offsetTop;

                this.dragIng(disX,disY);
                this.dragEnd()
            }
       }

       dragIng(x,y){
            document.onmousemove=(evt)=>{
                var e=evt||window.event;
                this.ele.style.left=e.clientX-x+"px";
                this.ele.style.top=e.clientY-y+"px";
            }
       }
       dragEnd(){
            document.onmouseup=()=>{
                document.onmousemove=document.onmouseup=null;
            }
       }
    }

    new DragBox().init(".box").dragStart();
    new DragBox().init(".box1").dragStart()
</script>
</body>
</html>